<template>
  <div class="login">
    <van-nav-bar
      class="app-nav-bar"
      title="注册 / 登录"
      left-arrow
      @click-left="onClickLeft"
    />

    <!-- 登录表单 -->
    <!--
       基于 Vant 的表单验证：
       1.使用 van-form 组件包裹 所有表单项 van-field
       提示：只有表单验证通过，它才会调用 submit
       2.使用 Field 的 rules 属性定义校验规则
     -->
    <van-form
      :show-error="false"
      :show-error-message="false"
      validate-first
      ref="loginForm"
      @submit="onLogin"
      @failed="onFailed"
    >
      <van-field
        v-model="user.mobile"
        icon-prefix="icon"
        left-icon="shouji"
        placeholder="请输入手机号"
        name="mobile"
        :rules="formRules.mobileRules"
      />
      <van-field
        v-model="user.code"
        clearable
        icon-prefix="icon"
        left-icon="yanzhengma"
        placeholder="请输入验证码"
        name="code"
        :rules="formRules.codeRules"
      >
        <template #button>
          <!-- @click.prevent 阻止点击默认行为 阻止表单提交事件 -->
          <van-button
            v-if="!isCountDownShow"
            class="send-btn"
            size="small"
            round
            :loading="isSendSmsLoading"
            @click.prevent="onSendSms"
            >获取验证码</van-button
          >
          <van-count-down
            v-else
            class="countDown"
            @finish="isCountDownShow = false"
            :time="1000 * 60"
            format="ss s"
          />
        </template>
      </van-field>
      <div class="login-btn-wrap">
        <van-button class="login-btn" type="info" block>登录</van-button>
      </div>
    </van-form>

    <div class="bottom-prompt">
      <span class="text">账号：17090086870</span>
      <span class="text"> 密码：246810</span>
      <p>如果收不到验证码，请使用万能验证码：246810</p>
    </div>
  </div>
</template>

<script>
import { login, sendSms } from "@/api/user";

export default {
  name: "login",
  data() {
    return {
      user: {
        mobile: "17090086870", // 手机号
        code: "246810", // 验证码
      },
      formRules: {
        // 手机验证规则
        mobileRules: [
          { required: true, message: "请输入手机号" },
          // ^1 以1开头, [3|5|7|8|9]第二位是 35789中一个, \d{9}后面还要九位数字
          { pattern: /^1[3|5|7|8|9]\d{9}$/, message: "手机号格式错误" },
        ],
        // 验证码验证规则
        codeRules: [
          { required: true, message: "请输入验证码" },
          // ^1 以1开头, [3|5|7|8|9]第二位是 35789中一个, \d{9}后面还要九位数字
          { pattern: /^\d{6}$/, message: "验证码应为6位" },
        ],
      },
      // 是否显示倒计时
      isCountDownShow: false,
      // 发送验证码按钮的loading
      isSendSmsLoading: false,
    };
  },
  methods: {
    onClickLeft() {
      this.$router.back();
    },
    async onLogin() {
      this.$toast.loading({
        message: "登录中...",
        forbidClick: true, // 是否禁止背景点击
        duration: 0, // 值为 0 时，toast 不会消失
      });
      // 1.找到数据接口
      // 2.封装请求方法
      // 3.请求调用登录
      // api/user.js 的 login 方法
      try {
        // 结构 data
        const { data } = await login(this.user);
        // 4.处理响应结果
        this.$toast.success("登录成功");

        // 将后端返回的用户登录状态 （token等数据）放到 Vuex 容器中
        this.$store.commit("setUser", data.data);

        // 登录成功，跳转回原来页面  (back这样不太好)
        this.$router.back();
      } catch (err) {
        this.$toast.fail("登录失败，手机号或验证码错误！！");
      }
    },
    // 表单验证没通过的时候
    onFailed(err) {
      if (err.errors[0]) {
        this.$toast({
          message: err.errors[0].message,
          position: "top",
        });
      }
    },
    // 发送验证码
    async onSendSms() {
      try {
        // 校验手机号码 -> 请求发送验证码 -> 显示倒计时
        await this.$refs["loginForm"].validate("mobile");
        // 验证通过，请求发送验证码
        // 显示按钮 loading 状态 防止多次点击
        this.isSendSmsLoading = true;
        await sendSms(this.user.mobile);

        // 短信发出去了, 显示倒计时
        this.isCountDownShow = true;
      } catch (err) {
        // try 里面任何代码错误都进入 catch
        // 验证手机号码错误 和 发送短信失败都会进来
        let message = "";
        if (err && err.response && err.response.status === 429) {
          message = "发送太频繁了，请稍后重试";
        } else if (err.name === "mobile") {
          message = err.message;
        } else {
          message = "发送失败，未知错误!";
        }
        this.$toast({
          message,
          position: "top",
        });
      }

      // 无论发送成功与否 都关闭 loading 状态
      this.isSendSmsLoading = false;
    },
  },
};
</script>

<style scoped lang="less">
.login {
  .send-btn {
    width: 152px;
    height: 46px;
    background-color: #ededed;
    font-size: 22px;
    color: #666666;
  }

  .countDown {
    font-size: 26px;
    padding: 10px;
    color: #888;
    margin-right: 20px;
  }

  .login-btn-wrap {
    padding: 52px 32px;
    .login-btn {
      background-color: #67b0ff;
      border: none;
      border-radius: 10px;
      .van-button__text {
        font-size: 30px;
      }
    }
  }

  .bottom-prompt {
    margin-top: 30px;
    text-align: center;
    color: #aaa;
    .text {
      font-size: 28px;
    }
    p {
      font-size: 26px;
    }
  }
}
</style>